<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.wrap {
				margin: 20px auto;
				width: 1200px;
				height: 800px;
				background-color: deepskyblue;
				text-align: center;
				border-radius: 20px;
			}
			
			.wrap>div {
				margin: 43px 55px;
				border: 1px solid black;
				border-radius: 20px;
				float: left;
				width: 40%;
				height: 90%;
			}
			
			.content div {
				height: auto;
				width: 100%;
			}
			
			#one h3 {
				font-size: 34px;
				font-weight: 700;
				font-style: italic;
			}
			
			#one p {
				text-align: left;
				letter-spacing: 8px;
			}
			
			#one i {
				border: 1px solid black;
				border-radius: 20px;
				letter-spacing: 8px;
				color: red;
			}
			
			i:hover {
				cursor: pointer;
			}
			
			#two {
				text-align: left;
			}
			
			#two i {
				letter-spacing: 8px;
				border: 1px solid black;
				border-radius: 20px;
			}
			
			#two i:after {
				content: "×";
				border-left: 1px solid black;
			}
			
			#two i:hover {
				background-color: red;
			}
			
			#three i {
				display: inline-block;
				margin: 8px 8px;
				border: 1px solid black;
				border-radius: 20px;
				letter-spacing: 8px;
				color: #eab20c;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<div class="content">
				<div id="one">
					<h3>My Teachers</h3>
					<p>NAMES:</p>
					<i>乌拉</i>
					<i>心艾</i>
					<i>阿飞</i>
					<i>white</i>
					<i>一方</i>
					<br /><br />
					<hr />
				</div>
				<div id="two">
				</div>
			</div>
			<div id="three">
			</div>
		</div>
	</body>

</html>
<script type="text/javascript">
	var oOne = document.getElementById("one");
	var oTwo = document.getElementById("two");
	var oThree = document.getElementById("three");

	/**
	 * @param
	 * ele1 内容元素节点
	 * ele2 元素删除节点区
	 * ele3 内容区
	 * tagName 统一的标签名
	 */

	(function(ele1, ele2, ele3, tagName) {
		var ele1Tags = ele1.getElementsByTagName(tagName);
		var ele2Tags = ele2.getElementsByTagName(tagName);
		for(var key in ele1Tags) {
			(function(key) {
				ele1Tags[key].bool = true;
				ele1Tags[key].onclick = function() {
					this.cloneNode(true)
					if(this.bool === true) {
						ele2.appendChild(this.cloneNode(true));
						ele3.appendChild(this.cloneNode(true));
						this.bool = false;
						fn();
					}
				}
			})(key)
		}
		//移除与设置
		function fn() {

			for(var key1 in ele2Tags) {
				(function(key1) {
					ele2Tags[key1].onclick = function() {
						//先清除右边的
						//设置原来的为true
						var right = ele3.getElementsByTagName(tagName);
						var thisValue = this.innerText;
						for(var key in right) {
							if(right[key].innerText === thisValue) {
								ele3.removeChild(ele3.children[key]);
							}
						}
						//设置左侧的bool
						var left1 = ele1.getElementsByTagName(tagName);
						for(var key in left1) {
							if(left1[key].innerText === thisValue) {
								left1[key].bool = true;
							}
						}
						//清除自己
						ele2.removeChild(this);
					}
				})(key1);

			}
		}
	})(oOne, oTwo, oThree, "i");
</script>